<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- AdThrive Head Tag Manual -->
    <script data-no-optimize="1" data-cfasync="false">
      (function (w, d) {
        w.adthrive = w.adthrive || {};
        w.adthrive.cmd = w.adthrive.cmd || [];
        w.adthrive.plugin = "adthrive-ads-manual";
        w.adthrive.host = "ads.adthrive.com";
        var s = d.createElement("script");
        s.async = true;
        s.referrerpolicy = "no-referrer-when-downgrade";
        s.src =
          "https://" +
          w.adthrive.host +
          "/sites/643436a4e6d20859e40a446b/ads.min.js?referrer=" +
          w.encodeURIComponent(w.location.href) +
          "&cb=" +
          (Math.floor(Math.random() * 100) + 1);
        var n = d.getElementsByTagName("script")[0];
        n.parentNode.insertBefore(s, n);
      })(window, document);
    </script>
    <!-- End of AdThrive Head Tag -->

    <meta charset="utf-8" />
    <title>D3.js functions cheatsheet</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta
      name="description"
      content="Using d3.js to create a very basic histogram"
    />
    <meta
      name="keywords"
      content="Data,Dataviz,Datavisualization,Javascript, JS, d3.js"
    />
    <meta name="author" content="Yan Holtz" />
    <meta property="og:title" content="D3.js functions cheatsheet" />
    <meta property="og:image" content="img/overview_RGG.png" />
    <meta property="og:description" content="D3.js functions cheatsheet" />
    <link
      rel="icon"
      href="https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/img/logo/logo_xxs.png"
    />

    <!-- Bootstrap core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Custom fonts for this template -->
    <link
      href="../vendor/font-awesome/css/font-awesome.min.css"
      rel="stylesheet"
      type="text/css"
    />

    <!-- Custom styles for this template -->
    <link href="../css/agency.css" rel="stylesheet" />

    <!-- PRISM -->
    <script src="../LIB/prism.js"></script>
    <link href="../LIB/prism.css" rel="stylesheet" />

    <!-- D3.JS v4 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- JQUERY -->
    <script src="../vendor/jquery/jquery.min.js"></script>

    <!-- HTML TO CANVAS -->
    <script src="../js/html2canvas.js"></script>

    <!-- Function to parse html and js code chunks made by Yan Holtz -->
    <script src="../js/myParser.js"></script>
  </head>

  <body id="page-top">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
      <div class="container">
        <a href="../index.html">D3.js Graph Gallery</a>
        <button
          class="navbar-toggler navbar-toggler-right"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="CONTENT/optimization.html">R</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="CONTENT/private_API.html">Python</a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link js-scroll-trigger"
                href="CONTENT/arbitrage.html"
                >Data to viz</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Who am I</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Header -->
    <header class="masthead" style="padding-top: 150px; padding-bottom: 80px">
      <div class="textlanding">
        <p style="display: inline; font-size: 35px">My d3.js cheasheet</p>
        <hr
          style="
            width: 100px;
            height: 1px;
            border: none;
            color: #333;
            background-color: #333;
          "
        />
        <br />
        <ul class="list-inline social-buttons">
          <li class="list-inline-item">
            <a href="https://twitter.com/R_Graph_Gallery">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://github.com/holtzy">
              <i class="fa fa-github" style="color: white"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
        </ul>
        <br /><br />
        <p style="max-width: 700px; margin: auto">
          This is my d3.js cheatsheet. Basically, it's a set of one-liner d3.js
          code that are often used in the gallery.
        </p>
        <br />
        <a
          class="btn btn-secondary btn-md text-uppercase"
          href="../histogram.html"
          >Histogram section</a
        >
        <button
          class="btn btn-secondary btn-md text-uppercase"
          onclick="myCodeDownload('chart_example_from_d3-graph-gallery.html', 'code', 'codejs')"
        >
          Download code
        </button>
      </div>
    </header>

    <style></style>

    <!-- ==================== SECTION: SVG DRAWERS ==================== -->

    <section style="padding-top: 20px; padding-bottom: 20px">
      <div class="container">
        <h1>Basic SVG</h1>
        <hr />
        <p>
          Most of the time, elements are added to the chart using
          <code>svg</code>. Here is a list of elements you can add in svg, and
          their related attribute.
        </p>
        <ul>
          <li>
            <div>
              <p><code>Circle</code>:</p>
              <pre
                class="language-js"
              ><code id="code" contenteditable="true"><xmp>svg.append("circle")
          .attr("cx", 10)   // x coordinate
          .attr("cy", 10)   // y coordinate
          .attr("r", 5)     // radius</xmp></code></pre>
            </div>
          </li>

          <li>
            <div>
              <p><code>Rect</code>:</p>
              <pre
                class="language-js"
              ><code id="code" contenteditable="true"><xmp>svg.append("rect")
          .attr("x", 10)      // x coordinate of bottom left corner
          .attr("y", 10)      // y coordinate of bottom left corner
          .attr("width", 25)  // width -> goes to the right
          .attr("height", 40) // height -> goes to the bototm</xmp></code></pre>
            </div>
          </li>

          <li>
            <div>
              <p><code>Text</code>:</p>
              <pre
                class="language-js"
              ><code id="code" contenteditable="true"><xmp>svg.append("text")
          .attr("x", 10)  // x coordinate
          .attr("y", 10)  // y coordinate</xmp></code></pre>
            </div>
          </li>

          <li>
            <div>
              <p><code>line</code>:</p>
              <pre
                class="language-js"
              ><code id="code" contenteditable="true"><xmp>svg.append("text")
          .attr("x1", 10)  // x coordinate of start
          .attr("y1", 10)  // y coordinate of start
          .attr("x2", 15)  // x coordinate of end
          .attr("y2", 82)  // y coordinate of end
        </xmp></code></pre>
            </div>
          </li>

          <li>
            <div>
              <p><code>path</code>:</p>
              <pre
                class="language-js"
              ><code id="code" contenteditable="true"><xmp>svg.append("path")
          .attr("d", "M150 0 L75 200 L225 200 Z")
          // start at 150;0, Then I do a line until 75;200, Then another line until 225 200, then I close
        </xmp></code></pre>
            </div>
          </li>
        </ul>
      </div>
    </section>

    <!-- ================================================================================= -->

    <!-- ==================== SECTION: D3-SHAPE ==================== -->

    <section style="padding-top: 20px; padding-bottom: 20px">
      <div class="container">
        <h1>D3 Shape</h1>
        <hr />
        <p>
          D3 offers a set of helpers function allowing to draw svg elements from
          data more efficiently. The complete reference is available on the
          <a href="https://github.com/d3/d3-shape">d3 github repo.</a>
        </p>
        <ul>
          <li>
            <div>
              <p><code>Area</code>:</p>
              <pre
                class="language-js"
              ><code id="code" contenteditable="true"><xmp>svg.append("circle")
        </xmp></code></pre>
            </div>
          </li>

          <div id="my_dataviz"></div>

          <pre
            class="language-js"
          ><code id="codejs" contenteditable="true"><xmp><script>
      Yo
      </script></xmp></code></pre>
        </ul>
      </div>
    </section>

    <!-- ================================================================================= -->

    <!-- ==================== GRAPH SECTION = WHERE THE GRAPH APPEARS ==================== -->

    <section class="bg-light" style="padding-top: 20px; padding-bottom: 20px">
      <div class="container">
        <center><div id="result"></div></center>
      </div>
    </section>

    <!-- ================================================================================= -->

    <!-- ==================== CODE SECTION = WHERE THE CODE APPEARS ==================== -->
    <section class="code-area" style="padding-top: 20px; padding-bottom: 20px">
      <div class="container">
        <!-- ========= show html code ============== -->
        <br />
        <p>
          This is a very basic <a href="">histogram</a> made using d3.js. The
          data comes from here. It uses the histogram function d3. And here are
          a few more things about it. It uses the histogram function d3. And
          here are a few more things about it. here is the code building the
          figure. Remember it is interactive.
        </p>
        <aside>&larr; Edit me!</aside>
        <pre
          class="language-html"
        ><code id="code" contenteditable="true"><xmp><!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

</xmp></code></pre>
        <!-- ==================================== -->

        <!-- ========= show JS code ==============  -->
        <aside>&larr; Edit me!</aside>
        <pre
          class="language-js"
        ><code id="codejs" contenteditable="true"><xmp><script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 40)

</script></xmp></code></pre>
        <!-- ==================================== -->

        <!-- ==================== JAVASCRIPT SECTION : EXECUTE THIS CODE AND MAKE IT INTERACTIVE ==================== -->
        <script>
          // At the beginning, I read the html and JS fragments
          myHtmlParser("code", "result");
          myJSParser("codejs", "result");

          // If the user change the JS fragment, I run it again:
          document
            .getElementById("codejs")
            .addEventListener("input", function () {
              d3.select("#result").html("");
              myHtmlParser("code", "result");
              myJSParser("codejs", "result");
            });

          // If the user change the HTML fragment, I run it again:
          document
            .getElementById("code")
            .addEventListener("input", function () {
              d3.select("#result").html("");
              myHtmlParser("code", "result");
              myJSParser("codejs", "result");
            });
        </script>
      </div>
    </section>

    <!-- ============================ -->

    <!-- ============================ RELATED BLOCKS ============================ -->

    <section
      id="contact"
      class="bg-light"
      style="padding-top: 70px; padding-bottom: 70px"
    >
      <div class="container">
        <div class="row">
          <div
            class="col-lg-5 text-center .align-middle"
            style="border-right: solid"
          >
            <div style="display: table; height: 150px; overflow: hidden">
              <div style="display: table-cell; vertical-align: middle">
                <h2 class="section-heading text-uppercase" style="color: black">
                  Related blocks
                </h2>
              </div>
            </div>
          </div>
          <div class="col-lg-5">
            <div style="display: table; height: 150px; overflow: hidden">
              <div style="display: table-cell; vertical-align: middle">
                <ul>
                  <li>
                    <i>D3.selectAll(...).transition() Explained - </i
                    ><a href="http://bl.ocks.org/Kcnarf/9e4813ba03ef34beac6e"
                      >link</a
                    >
                  </li>
                  <br />
                  <li>yo</li>
                  <br />
                  <li>ll</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================ CONTACT SECTION ============================ -->

    <!-- ANCHOR -->
    <a name="contactanchor"></a>

    <section id="contact" class="bg" style="background-color: white">
      <div class="container">
        <div class="row">
          <div class="col-lg-2 text-center"></div>
          <div class="col-lg-8 text-center">
            <br /><br /><br />
            <h2 class="section-heading text-uppercase" style="color: black">
              Contact
            </h2>
            <p>
              This document is a work in progress analysis by Yan Holtz. Any
              feedback is highly encouraged. You can fill an issue on
              <a href="https://github.com/holtzy/data_to_viz">Github</a>, drop
              me a message on
              <a href="https://twitter.com/R_Graph_Gallery">Twitter</a>, or send
              an email pasting <a href="">yan.holtz.data</a> with
              <a href="">gmail.com</a>.
            </p>
            <div style="text-align: center">
              <a
                class="btn btn-primary btn-xl text-uppercase js-scroll-trigger"
                href="https://github.com/holtzy"
                >Github</a
              >
              <a
                class="btn btn-primary btn-xl text-uppercase js-scroll-trigger"
                href="https://twitter.com/R_Graph_Gallery"
                >Twitter</a
              >
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================ FOOTER SECTION ============================ -->
    <footer class="bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span class="copyright"
              >Copyright &copy; the d3 graph gallery 2018</span
            >
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="https://twitter.com/R_Graph_Gallery">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="https://github.com/holtzy">
                  <i class="fa fa-github"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

    <!-- ============================ -->

    <!-- ============================ JAVASCRIPT SECTION ============================ -->

    <!-- Bootstrap core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <!--<script src="../vendor/jquery-easing/jquery.easing.min.js"></script> -->

    <!-- Contact form JavaScript -->
    <script src="../js/jqBootstrapValidation.js"></script>

    <!-- Custom scripts for this template -->
    <script src="../js/agency.min.js"></script>

    <!-- Activate the bootstrap tooltip, must be after jQuery load -->
    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>

    <!-- Function to download the content of the div -->
    <script>
      function download() {
        var a = document.body.appendChild(document.createElement("a"));
        a.download = "export.html";
        var command = document.getElementById("code").innerHTML;
        command = command.replace(/<\/?span[^>]*>/g, "");
        a.href = "data:html" + command;
        a.click(); // Trigger a click on the element
      }
    </script>

    <!-- Function to download the graphic as png automatically -->
    <!--     <script>
        html2canvas($('#content'),
        {
          onrendered: function (canvas) {
            var a = document.createElement('a');
            // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
            a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            a.download = 'somefilename.jpg';
            a.click();
          }
        });
    </script> -->
  </body>
</html>
